---
id: avatar
title: Avatar
sidebar_label: Avatar
---

Avatars are visual placeholders for representing users or entities. They can contain images or initials and are commonly used in headers, lists, and anywhere user information is presented.

## Image Avatar

The `src` prop specifies the image URL for the avatar.

import CodeBlock from "@theme/CodeBlock";
import CodeSample from "../../src/CodeSample";

import AvatarImageDemo from '../../samples/components/avatar/avatar_image';
import AvatarImageSource from '!!raw-loader!../../samples/components/avatar/avatar_image';

<CodeSample>
    <AvatarImageDemo/>
</CodeSample>

<CodeBlock language="tsx">{AvatarImageSource}</CodeBlock>

## Text Avatar

When the `src` prop is not provided, the avatar can display text such as user initials.

import AvatarTextDemo from '../../samples/components/avatar/avatar_text';
import AvatarTextSource from '!!raw-loader!../../samples/components/avatar/avatar_text';

<CodeSample>
    <AvatarTextDemo/>
</CodeSample>

<CodeBlock language="tsx">{AvatarTextSource}</CodeBlock>

## Custom Styling

The `className` prop allows you to pass custom CSS classes to the avatar component.

import CustomStyleAvatarDemo from '../../samples/components/avatar/custom_style_avatar';
import CustomStyleAvatarSource from '!!raw-loader!../../samples/components/avatar/custom_style_avatar';

<CodeSample>
    <CustomStyleAvatarDemo/>
</CodeSample>

<CodeBlock language="tsx">{CustomStyleAvatarSource}</CodeBlock>
